@import "vapor";

.dark {
    $heading-color-dark: $grey-100;
    $nav-link-action-color-dark: $blue-300;

    body {
        background: $grey-900;
        color: $grey-500;
        background-image: url(../../images/main-background-dark.jpg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100% 500px;
    }

    body.main-site-main-page {
        background-position-y: 250px;
        background-size: initial;
    }

    .hljs {
        background: rgba(38, 38, 56, 0.8);
        border: 1px solid rgba(221, 214, 254, 0.2);
        border-radius: 24px;
    }

    #theme-switch-icon {
        background-color: $grey-600;
        -webkit-mask-image: url(../../images/moon-01.svg);
        -webkit-mask-position: center;
        mask-image: url(../../images/moon-01.svg);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: cover;
    }

    #theme-switch-icon:hover {
        background-color: $nav-link-action-color-dark;
    }

    .navbar {
        background: linear-gradient(180deg, $grey-900 0%, rgba($grey-900, 0) 100%);
    }

    #vapor-logo {
        background: url(../../images/logo-main-white.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #vapor-logo-footer {
        background: url(../../images/logo-main-white.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    a:hover {
        .vapor-icon {
            background-color: $nav-link-action-color-dark;
        }
    }

    .nav-link:hover {
        color: $nav-link-action-color-dark;
    }

    .navbar-nav {
        .nav-link.active {
            color: $nav-link-action-color-dark;
        }
    }

    h1 {
        color: $heading-color-dark;
    }

    h2 {
        color: $heading-color-dark;
    }

    h3 {
        color: $heading-color-dark;
    }

    h4 {
        color: $heading-color-dark;
    }

    h5 {
        color: $heading-color-dark;
    }

    h6 {
        color: $heading-color-dark;
    }

    .blog-description {
        color: $grey-500;
    }

    .blog-container {
        color: $grey-400;
    }

    $blog-content-heading-color-dark: $grey-300;

    .blog-content {
        h1 {
            color: $blog-content-heading-color-dark;
        }

        h2 {
            color: $blog-content-heading-color-dark;
        }

        h3 {
            color: $blog-content-heading-color-dark;
        }

        h4 {
            color: $blog-content-heading-color-dark;
        }

        h5 {
            color: $blog-content-heading-color-dark;
        }

        h6 {
            color: $blog-content-heading-color-dark;
        }
    }

    $footer-link-color-dark: $grey-600;

    footer {
        background: $off-black;
        border-top: 1px solid $grey-800;
        color: $footer-link-color-dark;

        li {
            a {
                color: $footer-link-color-dark;
            }

            a:hover {
                color: $nav-link-action-color-dark;
            }
        }

        h6 {
            color: $nav-link-action-color-dark;
        }

        .vapor-icon {
            background-color: $nav-link-action-color-dark;
        }

        .vapor-icon:hover {
            background-color: $grey-200;
        }

        #footer-copyright {
            color: $nav-link-action-color-dark
        }
    }

    hr {
        color: $grey-700;
    }

    .btn-secondary {
        --#{$prefix}btn-bg: rgba(white, 0.05);
        ;
        --#{$prefix}btn-border-color: 1px solid rgba($pink-300, 0.1);
        color: $pink-300;
        // border: 1px solid rgba($pink-300, 0.1);
        background: rgba(white, 0.05);
        border: 1px solid rgba($pink-300, 0.1);

        .vapor-icon {
            background-color: $pink-300;
        }
    }

    .btn-secondary:hover {
        color: $pink-200;
        --#{$prefix}btn-bg: rgba(white, 0.1);
        ;
        --#{$prefix}btn-border-color: 1px solid rgba($pink-300, 0.2);
        background: rgba(white, 0.1);
        border: 1px solid rgba($pink-300, 0.2);

        .vapor-icon {
            background-color: $pink-200;
        }
    }

    .btn-primary:hover {
        --#{$prefix}btn-hover-bg: linear-gradient(180deg, $pink-300 0%, $pink-400 100%);
        --#{$prefix}btn-hover-border-color: transparent;
        background: linear-gradient(180deg, $pink-300 0%, $pink-400 100%);
    }

    .btn-primary {
        a:hover {
            .vapor-icon {
                background-color: white;
            }
        }
    }

    .blog-tags {
        color: $grey-100;

        ul {
            li {
                background: $grey-800;

                a {
                    color: $grey-100;
                }

                a:hover {
                    color: white;
                }
            }
        }
    }

    #blog-time-tags {
        background: rgba($grey-800, 0.3);

        ul {
            li {
                background: $grey-800;

                a {
                    color: white;
                }
            }
        }
    }

    .blog-post-author-name {
        color: $grey-300;
    }

    blockquote {
        color: $grey-200;
    }

    #framework-dropdown-menu {
        background: $off-black;
        border-top: 1px solid $grey-800;
        border-bottom: 1px solid $grey-800;
        border-left: none;
        border-right: none;
    }

    .nav-dropdown-container-title {
        color: $grey-100;
    }

    .nav-dropdown-container {
        .vapor-icon {
            background-color: $blue-300;
        }
    }

    nav {
        #vapor-navbar-toggler-icon {
            background-color: $grey-100;
        }
    }

    @include media-breakpoint-down(lg) {
        #navbarSupportedContent {
            background: $off-black;
        }
    }

    @include media-breakpoint-up(lg) {
        #framework-dropdown-menu {
            box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
            border: 1px solid $grey-800;
        }
    }

    #documentation-dropdown-link:hover {
        .vapor-icon {
            background-color: $nav-link-action-color-dark;
        }
    }

    #documentation-dropdown-link:active {
        .vapor-icon {
            background-color: $nav-link-action-color-dark;
        }
    }

    #documentation-dropdown-link:focus {
        .vapor-icon {
            background-color: $nav-link-action-color-dark;
        }
    }

    .pagination {
        .page-item {
            color: $grey-500;
            background: transparent;

            a {
                color: $grey-500;
            }

            a:hover {
                background-color: $off-black;
                border: 1px solid $grey-800;
            }

            .page-link-next-previous {
                background: rgba(white, 0.05);
                border: 1px solid rgba($pink-300, 0.1);
                color: $blue-300;
            }

            .page-link-next-previous:hover {
                color: $blue-400;
            }
        }

        .disabled {
            .page-link {
                color: $blue-400;
                background-color: $off-black;
                border: 1px solid $grey-800;
            }
        }

        .active {
            .page-link {
                color: $grey-400;
                background-color: $off-black;
                border: 1px solid $grey-800;
            }
        }
    }

    .dropdown-item:hover {
        background-color: rgba($grey-800, 0.3);
    }

    .blog-card {
        background: rgba($grey-800, 0.3);

        .card-title {
            color: $grey-300;
        }

        .card-text {
            color: $grey-500;
        }

        .card-body {
            .blog-post-publish-date {
                color: $grey-700;
            }

            .blog-post-author-name {
                color: $grey-500;
            }
        }
    }

    .blog-tag-list {
        .list-heading {
            color: $grey-200;
        }

        @include media-breakpoint-up(lg) {
            .tag-list-tag {
                .tag-link {
                    color: $grey-500;

                    .badge {
                        color: $grey-300;
                        background-color: $grey-800;
                    }
                }
            }

            .tag-list-tag {

                .tag-link:hover,
                .tag-link.active {
                    color: $grey-100;
                    background-color: $grey-800;

                    .badge {
                        background-color: $grey-700;
                        color: $blue-300;
                    }
                }
            }
        }
    }

    .vapor-molecule {
        background-color: $off-black;
        border: 1px solid $grey-800;
        color: $grey-500;

        .vapor-icon {
            background-color: $grey-500;
        }
    }

    .vapor-molecule:active,
    .vapor-molecule:hover {
        background-color: $grey-800;
        border: 1px solid $grey-700;
        color: $grey-400;

        .vapor-icon {
            background-color: $grey-400;
        }
    }

    .mobile-drop-down-menu {
        @include media-breakpoint-down(lg) {
            background: $off-black;
            border: 1px solid $grey-800;

            li a {
                color: $grey-500;
            }

            li a.active,
            a:hover,
            li a:active {
                color: $blue-300;
            }
        }
    }

    .main-page-caption {
        color: $grey-500;
    }

    .btn-link {
        color: $grey-200;

        a {
            color: $grey-200;
        }

        a:hover {
            color: $grey-100;

            .vapor-icon {
                background-color: $grey-100;
            }
        }
    }

    .btn-secondary-link {
        color: $grey-500;

        a {
            color: $grey-500;
        }

        a:hover {
            color: $grey-400;

            .vapor-icon {
                background-color: $grey-400;
            }
        }
    }

    .icon-secondary {
        background-color: $grey-500;
    }

    .main-site-main-page {
        @include media-breakpoint-up(md) {
            background-image: url(../../images/main-site-homepage-hero-dark.svg);
        }
    }

    #vapor-hero-logo {
        background-image: url(../../images/logo-main-white.svg);
    }

    .used-by-caption {
        color: $grey-400;
    }

    .used-by-icon {
        background-color: $grey-500;
    }

    .vapor-feature-card {
        background-color: rgba($grey-800, 0.3);

        .card-text {
            color: $grey-500;
        }
    }

    .learn-more-link {
        color: $grey-200;

        .vapor-icon {
            background-color: $grey-200;
        }
    }

    .learn-more-link:hover {
        color: $grey-100;

        .vapor-icon {
            background-color: $grey-100;
        }
    }

    .main-site-features {
        .code-outline-right {
            background: linear-gradient($grey-900, $grey-900) padding-box,
                linear-gradient(90deg, rgba(148, 168, 178, 0.03) 0%, #F6F7F7 4.21%, rgba(148, 168, 178, 0.888453) 7.98%, #94A8B2 37.5%, rgba(148, 168, 178, 0.117173) 90.41%, rgba(148, 168, 178, 0) 100%) border-box;
        }

        .code-outline-left {
            background: linear-gradient($grey-900, $grey-900) padding-box,
                linear-gradient(90deg, rgba(148, 168, 178, 0.01) 0%, #F6F7F7 4.21%, rgba(148, 168, 178, 0.888453) 9.96%, #94A8B2 60.32%, rgba(148, 168, 178, 0.117173) 90.41%, rgba(148, 168, 178, 0.03) 100%) border-box;
        }

        .code-error {
            background: rgba(128, 25, 68, 0.2);
            border: 1px solid rgba(221, 214, 254, 0.1);

            .code-error-sidebar {
                background: rgba(128, 25, 68, 0.3);
            }

            .code-error-message {
                color: $grey-300;
            }
        }
    }

    #showcase {
        .showcase-header {
            .btn {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(223, 62, 251, 0.1);
            }

            .btn:hover {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(223, 62, 251, 0.2);
            }
        }

        .card {
            background: rgba(55, 57, 83, 0.3);
            color: $grey-500;

            .btn {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(223, 62, 251, 0.1);
            }

            .btn:hover {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(223, 62, 251, 0.2);
            }
        }

        .arrow-button {
            background: rgba(55, 57, 83, 0.3);
            border: 1px solid #373953;

            span {
                background-color: $grey-200;
            }
        }

        .arrow-button:hover {
            background: rgba(55, 57, 83, 0.5);
        }

        #sambot-card img {
            content: url(../../../static/images/sambot-card-dark.png);
        }

        #underway-nyc-card img {
            content: url(../../../static/images/underway-nyc-card-dark.png);
        }

        #swiftfiddle-card img {
            content: url(../../../static/images/swiftfiddle-card-dark.png);
        }

        #transeo-card img {
            content: url(../../../static/images/transeo-card-dark.png);
        }
    }

    #discord {
        .contribute-link {
            color: $grey-200;

            .vapor-icon {
                background-color: $grey-200;
            }
        }

        #discord-chat-image {
            content: url(../../../static/images/discord-chat-dark.png);
        }
    }

    #sponsors {
        .card {
            background: rgba(55, 57, 83, 0.30);

            h5 {
                color: $grey-200;
            }
        }
    }

    #api-docs {
        &::before {
            background: url("../../images/api-docs-background-gradient.svg") no-repeat right, #1C1C1F;
        }

        span {
            color: $grey-100;
        }
    }

    #integrations {
        background-image: url("../../images/integrations-background-dark.png") repeat;

        #integrations-image {
            content: url('../../../static/images/integrations-dark.png');
        }
    }
}
